<template>
  <a-form-item :name="formItem.name" :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
    :style="{ marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">
    <div class="switch-box">
      <a-switch :disabled="formItem.disabled" size="small" v-model:checked="formItem.value" />
    </div>

  </a-form-item>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from "vue"
import { dataSourceType } from "@/type.d";
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';
//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType
  },

})

const emit = defineEmits(['changeRadio'])
const formItem: any = ref(props.formItem as any);

const changeSwitch = (e: any) => {
  emit('changeRadio', e.target.value)
}

useColumnItem(computed(() => props.formItem), formItem)
</script>

<style lang="less" scoped>
::v-deep(.ant-radio-group) {
  display: flex;
}

.switch-box {
  height: 32px;
  width: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>